<template>
	<div>
		<div class="activity_table" v-infinite-scroll="moreList" infinite-scroll-disabled="loading" infinite-scroll-immediate-check = "true" infinite-scroll-distance="100">
	        <!-- 活动列表 -->
	        <div class="activity_item" v-for="couponItem in activityPageList">
	        	<div class="activity_header">{{couponItem.act.actName}}</div>
		          <!-- 活动送的券 -->
		          <div class="coupon_dtl_coupon" :class="{'activity_bg_yellow':couponItem.coupon.type=='cash','activity_bg_green':couponItem.coupon.type=='rebate','activity_bg_blue':couponItem.coupon.type=='voucher','activity_bg_orange':couponItem.coupon.type=='present','activity_bg_purple':couponItem.coupon.type=='ticket'}">
		            <!-- <card-img :item="couponItem.coupon"></card-img> -->
								<div class="couponDiv">
									<coupon-denomination :item="couponItem.coupon"></coupon-denomination>
								</div>
		            <div class="card_info">
		              <div class="card_name">{{couponItem.coupon.name}}</div>
		              <div class="coupon_info_item clearfix">
		                <span>开始时间：{{couponItem.act.actBegDate|endtimeStampt}}</span>
		                <span class="right">结束时间：{{couponItem.act.actEndDate|endtimeStampt}}</span>
		              </div>
		              <div class="coupon_info_item">
		                <span v-if="couponItem.coupon.type=='rebate'">面值：<span class="color_red">{{couponItem.coupon.denomination/10 || denomination(couponItem.coupon.couponType || couponItem.coupon.type)}}折</span></span>
		                <span v-else>面值：<span class="color_red">￥{{couponItem.coupon.denomination || denomination(couponItem.coupon.couponType || couponItem.coupon.type)}}</span></span>
		              </div>
		            </div>
		          </div>
		          <p v-if="couponItem.coupon.type=='voucher'" class="activity_factor">
		          	<!--全场消费（<span class="scpoe">{{scpoe(couponItem.scpoe)}}</span>）-->
		          	满{{couponItem.coupon.restricted}}元可使用抵用券</p>
		          <div class="activity_des">活动描述：{{couponItem.act.actDsc}}</div>
	        </div>
	  	</div>
	  	<div class="loading-box" v-if="moreInfo">
	        <list-loading v-on:clickEvent="clickMoreList" :noMoreCoupon="noMoreFind"></list-loading>
	    </div>
	    <div class="lastInfoMore" v-if="!moreInfo" v-show="activityPageList.length>activityPageLimit">没有更多</div>
	    	<!--轮播-->
	    	<div style="background: white;height: 10rem;">
	    		 <swiper :options="swiperOption" ref="mySwiper">
                <!-- slides -->
                <swiper-slide v-for="couponItem in activityPageList" :key="couponItem">
                    <div class="actCoupon">
                    	<div  class="actCoupon_content">
                    		<div class="actCoupon_content_pic"></div>
                    		<div class="activity_header">{{couponItem.act.actName}}</div>
                    		<div>
                    			<span v-if="couponItem.coupon.type=='rebate'">面值：<span class="color_red">{{couponItem.coupon.denomination/10 || denomination(couponItem.coupon.couponType || couponItem.coupon.type)}}折</span></span>
		                        <span v-else>面值：<span class="color_red">￥{{couponItem.coupon.denomination || denomination(couponItem.coupon.couponType || couponItem.coupon.type)}}</span></span>
                    		</div>
                    		<div>
                    			有效期：{{couponItem.act.actBegDate|endtimeStampt}}-{{couponItem.act.actEndDate|endtimeStampt}}
                    		</div>
                    	</div>
                       
                    </div>
                    
                </swiper-slide>
                
            </swiper>
            <div class="swiper-pagination"></div>
	    	</div>
	    <div>
	    	
	    	
	    </div>
	    
    </div>
</template>
<script>
	require('swiper/dist/css/swiper.css')
	import listLoading from '../../componentes/global/listLoading.vue'
	import getData2 from '../../service/getData2.js'
    import * as types from '../../vuex/types.js'
    import * as types1 from '../../vuex/appendType.js'
    import {mapState} from 'vuex'
  	export default {
      	data() {
		    return {
		    	loading:true,
                noMoreFind:true,
                moreInfo:true,
                activityList:[],
                swiperOption: {
                    autoplay: 3000,
                    direction : 'horizontal',
                    pagination : '.swiper-pagination',
                    loop:true,
//                  height:48,
                    width:355
                },
		    }
	  	},
        components:{
					listLoading
        },
        computed:{
            ...mapState({
                activityPageList:state => state.find.activityPageList,
                activityPageLimit:state => state.find.activityPageLimit
            }),
             swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        created:function(){
        	this.$emit('header-info', {
            title: '优惠活动',
            isBack: true,
            isMessage: false
          	})
        	document.body.scrollTop = 0;
        	this.$store.commit(types1.ACTIVITY);
            this.$store.commit(types1.ACTIVITY_PAGE,1);
            this.$store.commit(types.GET_SCORLL_STATUS,true);
            this.clickMoreList();
        },
        methods:{

            clickMoreList:function(){
                if(!this.noMoreFind){//防止重复点击
                    return
                }
                var me=this;
                this.noMoreFind = false;
                // console.log(me.$route.query.mchtId)
                this.$store.dispatch('businessActivity',{method:'post',data:{aoData:'',"mchtId":me.$route.query.mchtId}}).then(function(rep){
                    if(rep.content.list){
                        if(rep.content.list.length < me.activityPageLimit){
                            setTimeout(function(){me.noMoreFind = true;},300);
                            me.moreInfo=false;
                        }
                        if(rep.content.list.length == me.activityPageLimit){
                            me.moreInfo=true;
                            me.loading = false;
                            me.noMoreFind = false;
                        }
                    }else{
                        setTimeout(function(){me.noMoreFind = true;},300);
                    }
                }).catch(function(rep){
                    setTimeout(function(){me.noMoreFind = true;},300);
                });
            },
            moreList:function(){
                this.loading = true;
                this.noMoreFind = true;
                this.clickMoreList();

            },
            scpoe: function(value) {
		      let type =  value.substring(0, 1)
		      let newVal
		      // I: 包括  T: 不包括
		      if (type === 'I') {
		        newVal = `包括${value.substring(1,value.length)}`
		      } else {
		        newVal = `除${value.substring(1,value.length)}外`
		      }
		      return newVal
		    }
	    }
	}
</script>
<style scoped>
	.actCoupon{
		height: 100%;
		background: url(../../images/act_border.png);
		padding: .5rem;
		margin-left:.5rem ;
		background-size: 100%;
		
	}
	.actCoupon:nth-of-type(1){
		/*margin-left: 1rem;*/
	}
	.actCoupon_content{
		height: 100%;
		background: #FFFFFF;
		width: 100%;
	}
	.actCoupon_content_pic{
		width:7rem;
		height: 7rem;
		margin: 1rem;
		float: left;
		background: url(../../images/buyDiscount.png);
		background-size: 100%;
	}
	.swiper-container {
		height: 10rem;
    }
    .swiper-container div:nth-of-type(1){
   
    }
/*活动优惠*/
.activity_item{
	margin-bottom: 0.9rem;
	background-color: #fff;
}
.activity_item .coupon_dtl_coupon{
  height: 7rem;
}
.activity_bg_blue{
  background: url(../../images/activity_bg_blue.png) 0 0 no-repeat;
}
.activity_bg_yellow{
  background: url(../../images/activity_bg_yellow.png) 0 0 no-repeat;
}
.activity_bg_green{
  background: url(../../images/activity_bg_green.png) 0 0 no-repeat;
}
.activity_bg_orange{
  background: url(../../images/activity_bg_orange.png) 0 0 no-repeat;
}
.activity_bg_purple{
  background: url(../../images/activity_bg_purple.png) 0 0 no-repeat;
}
.shop_activity{background-color: #f8f8f8;}
.activity_item .coupon_dtl_coupon{
    padding: 0.2rem 0.83rem 0.2rem 1rem;
    background-size: 100% 100%;
    margin-bottom: 0;
    border-bottom: none;
}
.activity_item .card_info{
  background-color: #fdfdfd;
  border-radius: 3px;
  margin:0.5rem 0 0 3.93rem;
  padding: .4rem 0 0 .5rem;
  height: calc(100% - 1.33rem);
}
.activity_item .coupon_info_item{
  line-height: 1.6;
  margin-top:0.33rem;
  padding: 0 0.5rem 0 0;
}
.color_red{color:#ee3155;}
.activity_factor{
  margin: 0 0.667rem;
  text-align: left;
  font-size: 0.8rem;
  color:#fff;
  height: 1.8rem;
  line-height: 1.8rem;
  background-color: #5898b3;
  padding-right: 1rem;
}
.activity_des{
  margin: 0 0.667rem;
  font-size: 0.8rem;
  color:#666;
  padding: 1rem 0;
}
.activity_header{
	font-size: 1rem;
	color:#333;
	/*font-weight: bold;*/
	padding: 0 0 0 1rem;
	line-height: 3rem;
}
.scpoe{
	max-width: 45%;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
    text-align: left;
}
</style>
<!-- 修改组件时要全局修改 -->
<style>
.activity_item .couponDiv{
    background: transparent;
}
.activity_item ._num{
  margin-top: 0.5rem;
}
.activity_item ._num_price span{
  font-size: 2rem;
  line-height: 1.2;
}
.activity_item .zhekou span{
	font-size: 1.2rem;
}
</style>
